<template>
	<view class="content">
		
		<view class="ld">
			<view class="left">
				<view v-for="(item,index) in classifyData" :key="index" @click="setid(index)"
					:class="classifyDataIndex==index?'active':'activeDefault'">
					<view class="text">
						{{item.name}}
					</view>

				</view>
			</view>
			<view class="right">
				<up-collapse :border='false' @change="clickTab">
					<up-collapse-item :disabled="false" :clickable="false" name="tabs">
						<template #title>
							<view @click.stop="stopPrevent()" v-if="opencell">
								<up-tabs :list="secondClassData" :current="secondClassDataIndex" lineColor="transparent"
									activeStyle=" padding:5rpx 20rpx;background: rgba(11, 158, 226, 0.2);border-radius: 44rpx;font-size: 24rpx;font-weight: 400;line-height: 58rpx;color: #0B9EE2;text-align: center"
									inactiveStyle="padding:5rpx 20rpx;border-radius: 29rpx;margin: 16rpx;font-size: 24rpx;font-weight: 400;line-height: 58rpx;color: #292A2E;text-align: center;"
									itemStyle="padding:0" @click.stop="classifyActive">
								</up-tabs>
							</view>
							<view style="font-size: 32rpx;color:#3d3d3d;padding:5rpx 20rpx;margin:8px" v-else>
								全部分类
							</view>
						</template>
						<view class="u-collapse-content stickyBox">
							<view class="beforeActive">
								<view v-for="(items,index) in secondClassData" :key="index">
									<view class="categoryName" @click="classifyActiveup(index)"
										:class="secondClassDataIndex == index ? 'activeClass':'categoryName'">
										{{items.name}}
									</view>
								</view>
							</view>
						</view>
					</up-collapse-item>
				</up-collapse>
				<scroll-view scroll-y="true" :scroll-top="scrollTop" style="height:calc(100% - 100rpx) ;"
					:scroll-with-animation="true" @scroll="scroll" @scrolltolower="scrolltolower"
					refresher-enabled="true" :refresher-threshold="100" @refresherrefresh="onRefresh">
					<view style="overflow: auto;height:100%">
						<view>
							<view v-if="productData.length!=0" style="overflow: hidden;">
								<view class="goodsItem" v-for="(goodsItem,goodsIndex) in productData" :key='goodsIndex'
									@click="productInfo(goodsItem)">
									<img :src="goodsItem.main_image" alt="" class="goodsItem-img" />
									<view class="goodsItem-right">
										<view class="goodsName">{{goodsItem.goods_name}}</view>
										<view class="goodsFree">￥{{goodsItem.price}}</view>
										<view class="goodsNum">已售{{goodsItem.sales}}</view>
										<block v-if="!goodsItem.specification">
											<!-- <view class="go-shop-car"
												@click.stop="onClick($event, '.button-r' + goodsIndex)"
												:ref="'button-r' + item">
												+
											</view> -->
											<view class="go-shop-car"
												@click.stop="open_specification(goodsItem.id)"
												:ref="'button-r' + item">
												+
											</view>
										</block>
										<block v-else>
											<view class="go-shop-car" style="font-size: 24rpx;width: 74rpx;border-radius: 200rpx;"
												@click.stop="open_specification(goodsItem)">
												规格
											</view>
										</block>
									</view>

								</view>
							</view>
							<view v-else>
								<up-divider text="到底了"></up-divider>
							</view>
						</view>
					</view>
					<up-divider text="加载更多"></up-divider>
				</scroll-view>
			</view>
		</view>

		<view class="cart">
			<view class="cart-button">
				<l-ball ref="ballRef">
					<template #default="{active}">
						<view class="cart-icon" @click="showCar">
							<image class="img" :class="{active}" mode="widthFix" src="@/static/Vector.png">
							</image>
							<view class="badge">
								<up-badge bgColor="#F03717" max="99" :value="num"></up-badge>
							</view>
						</view>
					</template>
				</l-ball>
			</view>
			<view class="cart-prices">
				<view class="price">
					<view class="payableAmount">
						¥<text class="text">{{totalMoney || 0}}</text>
					</view>
					<!-- <view class="totalAmount">
						<text class="text">预估配送费￥300</text>
					</view> -->
				</view>
			</view>
			<view class="cart-preview" @tap="accounts">去结算</view>
		</view>
		<sizepop ref='specification' @chooseItem="parentMethod"></sizepop>
		<shopCar ref='openCar' @changeNum="parentNum"></shopCar>


	</view>
</template>

<script>
	import { http } from 'uview-plus'
	import {
		computed,
		defineComponent,
		ref,
		getCurrentInstance
	} from "@/uni_modules/lime-ball/components/l-ball/vue";
	import lball from "@/uni_modules/lime-ball/components/l-ball/l-ball.vue";
	import sizepop from '@/componets/specification-pop/specification-pop.vue';
	import shopCar from '@/componets/shopCar-pop/shopCar-pop.vue'
	import {
		getRect
	} from '@/uni_modules/lime-shared/getRect'
	const ballRef = ref(null)
	export default defineComponent({
		components: {
			lball,
			sizepop,
			shopCar
		},
		data() {
			return {
				classifyData: [],
				secondClassData: [],
				productData: [],
				clickId: "",
				classifyDataIndex: 0, //默认展示的大类下标
				secondClassDataIndex: 0, //默认展示的子类下标
				RightTopArr: [],
				opencell: true,
				old: {
					scrollTop: 0
				},
				scrollTop: 0,
				totalMoney:uni.getStorageSync('totalMoney'),
				num:uni.getStorageSync("car_num")
			}
		},
		onReady() {

		},
		onLoad() {
			this.getClass(); //获取第一个大类
		},
		methods: {
			clickTab(e) {
				console.log(e)
				if (e[0].status == 'open') {
					this.opencell = false
				} else {
					this.opencell = true
				}
			},
			async getClass() {
				await http.get('/shop/goods/category').then(res => {
						console.log(res)
						this.classifyData = res
				});
				this.getSecondList(); //在第一个大类里获取他的小类
			},
			parentMethod(){
				console.log(uni.getStorageSync('totalMoney'))
				this.totalMoney = uni.getStorageSync('totalMoney')
				this.num = uni.getStorageSync('car_num')
			},
			parentNum(){
				this.totalMoney = uni.getStorageSync('totalMoney')
				this.num = uni.getStorageSync('car_num')
			},
			getSecondList() {
				this.secondClassData = this.classifyData[this.classifyDataIndex].children
				this.getProductList(); //在小类里获取当前小类的所有商品
			}, //此处调接口拿到数据并自行处理
			async getProductList() {
				await http.get('/shop/goods',{params:{category_id: this.secondClassData[this.secondClassDataIndex].id}}).then(res => {
						console.log(res)
						this.productData =res.data
				});
			},
			setid(e) {
				this.classifyDataIndex = e
				this.getSecondList(); //通过下表拿到大类id,在大类里获取他的小类
			},
			classifyActive(e) {
				this.secondClassDataIndex = e.index
				this.getProductList(); //通过下表拿到小类id,在小类里获取当前小类的所有商品
			},
			classifyActiveup(e) {
				this.secondClassDataIndex = e
				this.getProductList(); //通过下表拿到小类id,在小类里获取当前小类的所有商品
			},
			// 滚动到底部/右边，会触发 scrolltolower 事件
			scrolltolower() {
				this.scrollTop = this.old.scrollTop
				console.log('上拉加载')
				if (this.secondClassDataIndex == (this.secondClassData.length - 1)) {
					if (this.classifyDataIndex != (this.classifyData.length - 1)) {
						this.classifyDataIndex++
						this.getClass(this.classifyDataIndex); //获取下一个大类
					}
				} else {
					this.secondClassDataIndex++
					this.getSecondList(this.secondClassDataIndex); //获取下一个小类
				}
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			onRefresh() {
				console.log('下拉刷新')
				if (this.secondClassDataIndex == 0) {
					if (this.classifyDataIndex != 0) {
						this.classifyDataIndex--
						this.getClass(this.classifyDataIndex); //获取上一个大类
					}
				} else {
					this.secondClassDataIndex--
					this.getSecondList(this.secondClassDataIndex); //获取上一个大类
				}
			},
			open_specification(e) {
				this.$refs.specification.setup(e);
			},
			productInfo(e) {
				uni.navigateTo({
					url: '/pages/productDetail/productDetail?goods='+e.id
				})
			},
			accounts() {
				this.$refs.openCar.accounts();
				return
				uni.navigateTo({
					url: "/pages/order/creatOrder"
				})
			},
			showCar(){
				this.$refs.openCar.setCar();
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			stopPrevent() {}//展位
		},
		setup() {
			const context = getCurrentInstance()
			const ballRef = ref(null)
			const ballRef2 = ref(null)
			// const num = ref(0)
			// const price = computed(() => 450 * num.value)
			const onClick = (e, ref) => {
				if (!ballRef.value) return
				// #ifdef APP-NVUE
				getRect(ref, {
					context
				}).then(res => {
					ballRef.value.action({
						x: res.left,
						y: res.top
					})
				})
				// #endif
				// #ifndef APP-NVUE
				ballRef.value.action(e)
				// #endif
				num.value++
			}
			const onClick2 = (e, ref) => {
				if (!ballRef.value) return
				// #ifdef APP-NVUE
				getRect(ref, {
					context
				}).then(res => {
					ballRef.value.action({
						x: res.left,
						y: res.top
					})
				})
				// #endif
				// #ifndef APP-NVUE
				ballRef.value.action(e)
				// #endif
				num.value++
			}
			return {
				ballRef,
				ballRef2,
				onClick,
				onClick2,
				// num,
				// price
			}
		}
	})
</script>
<style lang="scss">
	.u-cell__body {
		padding: 0 !important;
	}

	.tip {
		padding: 32rpx;
		font-size: 28rpx;
		color: #666;
	}

	.item {
		display: flex;
		justify-content: space-between;
	}

	.btn {
		margin: 32rpx;
		width: 140rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		font-size: 28rpx;
		background-color: #007AFF;
		border-radius: 10rpx;
	}

	.red {
		background-color: red;
	}

	page {
		width: 100%;
		height: 100%;
		overflow: hidden;

		.content {
			@extend page;
			height: calc(100% - 106rpx);

			.stickyBox {
				width: 100%;
				display: flex;
				background-color: #FFFFFF;

				.beforeActive {
					width: 100%;

					.categoryName {
						padding: 5rpx 20rpx;
						border-radius: 44rpx;
						margin: 16rpx;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 58rpx;
						color: #292A2E;
						text-align: center;
						float: left;
						background: #F4F4F4;
					}

					.activeClass {
						margin: 16rpx;
						padding: 5rpx 20rpx;
						background: rgba(11, 158, 226, 0.2);
						font-size: 24rpx;
						font-weight: 400;
						color: #0B9EE2;
						float: left;
						box-sizing: border-box;
					}
				}

				.active {
					width: 600rpx;
					height: auto;
					overflow: visible;
					display: flex;
					justify-content: flex-start;
				}
			}

			.ld {
				@extend page;
				display: flex;

				.left {
					width: 156rpx;
					text-align: center;
					font-family: 思源黑体;
					font-size: 26rpx;
					font-weight: normal;
					line-height: 60rpx;
					background-color: #F7F7F7;

				}

				.right {
					flex: 1;
					padding: 10rpx 20rpx;
					box-sizing: border-box;
					width: 200rpx;
					height: 100%;

					.goodsItem {
						width: 100%;
						height: 194rpx;
						display: flex;
						margin-top: 12rpx;

						.goodsItem-img {
							width: 158rpx;
							height: 168rpx;
							border-radius: 7.34rpx;
							margin-right: 24rpx;
						}

						.goodsItem-right {
							width: 400rpx;
							font-family: 思源黑体;
							line-height: 40rpx;
							font-weight: normal;
							@include flex(column);
							justify-content: space-around;
							border-bottom: 2rpx solid #EEEEEE;
							position: relative;

							.goodsName {
								font-size: 28rpx;
								line-height: 32rpx;
								color: #333333;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.goodsFree {
								font-family: Source Han Sans;
								font-size: 36rpx;
								font-weight: 500;
								color: #FF0000;
								margin-top: 46rpx;
							}

							.goodsNum {
								font-size: 24rpx;
								color: #CCCCCC;
							}

							.go-shop-car {
								position: absolute;
								right: 0;
								bottom: 20rpx;
								border-radius: 34rpx;
								opacity: 1;
								background: #F03717;
								text-align: center;
								color: #FFFFFF;
								width: 44rpx;
								height: 44rpx;
								justify-content: center;
								@include flex(row);
								align-items: center;
							}

						}
					}
				}
			}

			.title {
				font-size: 20px;
				font-weight: bold;
				background-color: pink;
				overflow: hidden;
			}

			.activeDefault {
				height: 50px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.text {
					border-left: 8rpx solid transparent;
					height: 60rpx;
				}
			}

			.active {
				height: 98rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #000000;
				justify-content: center;

				.text {
					border-left: 8rpx solid #0B9EE2;
					width: 100%;
					box-sizing: border-box;
					height: 60rpx;

				}
			}

			.classifyDataMinHeght {
				min-height: 100vh;
			}
		}

		.cart {
			// z-index: 99999;
			position: fixed;

			bottom: 0rpx;
			background: $uni-bg-color;
			display: flex;
			align-items: center;
			color: #858687;
			// flex: 1;
			flex-direction: row;
			width: 100%;
			height: 106rpx;
			padding: 0 20rpx;
			box-sizing: border-box;

			&-icon {
				position: relative;
				margin-right: 20rpx;

				.img {
					width: 66rpx;
					transition: transform 0.3s ease;
					margin-top: 12rpx;

					&.active {
						transform: scale(1.5);
					}
				}

				.badge {
					position: absolute;
					right: -10rpx;
					top: -10rpx
				}
			}

			&-prices {
				flex: 1;
				font-size: 28rpx;
				flex-direction: row;

				.price {
					display: flex;
					flex-direction: column;
				}

				.text {
					color: #3D3D3D;
					font-size: 26rpx;
				}

				.payableAmount {
					// color: #fff;
					flex-direction: row;
					font-size: 26rpx;
					color: #E94816;
					font-weight: 500;

					.text {
						color: #E94816;
						font-size: 48rpx;
					}
				}

				.number {
					font-size: 40rpx;
				}
			}

			&-preview {
				width: 200rpx;
				height: 76.9rpx;
				border-radius: 67.42rpx;
				position: relative;
				display: flex;
				justify-content: center;
				background: #0B9EE2;
				line-height: 76.9rpx;
				font-size: 26.38rpx;
				color: #ffffff;
			}
		}

		.cart2 {
			bottom: 50rpx;
			justify-content: flex-end;
		}
	}
</style>